<!--
 * @FilePath: index.vue
 * @@author: wjj
 * @Date: 2024-10-10 12:57:53
 * @@Description: new js file
-->
<template>
  <el-card style="position: relative">
    <div class="box-home">
      <img
        :src="userStore.avatar"
        alt=""
        class="avatar"
        style="width: 200px; height: 200px"
      />
      <div class="bottom">
        <h3 class="title">{{ getTime() }}好,{{ userStore.username }}.</h3>
        <h1 class="gradient-text" style="margin-bottom: 20px; margin-top: 30px">
          {{ lizhi }}
        </h1>
        <p class="subtitle">Construct测试运营平台</p>
        <!-- <el-input v-model="yue"></el-input> -->
        <!-- <el-input v-model="ri"></el-input> -->
      </div>
    </div>
    <button class="constellation-btn" @click="starts_open" v-if="images_status">
      ✨星座分析
    </button>
  </el-card>

  <div
    class="bottoms"
    :style="
      !moonStatus
        ? { 'flex-direction': 'column', 'align-items': 'center' }
        : { 'flex-direction': 'column', 'align-items': 'center' }
    "
  >
    <!-- <svg-icon
        v-if="!moonStatus && !open_start"
        name="welcome"
        width="600px"
        height="300px"
        style="margin-top: 10px"
      ></svg-icon> -->
    <el-card
      class="weather-card"
      shadow="always"
      v-if="!moonStatus && !open_start"
    >
      <!-- 卡片头部：渐变背景与图标 -->
      <template #header>
        <div class="card-header">
          <div class="location">
            <el-icon><Location /></el-icon>
            <span>{{ city }}</span>
          </div>
          <el-tag type="info" class="update-time">
            {{ updateTime }}
          </el-tag>
        </div>
      </template>

      <!-- 卡片主体：温度与天气详情 -->
      <div class="weather-content">
        <!-- 温度核心区 -->
        <div class="weather-main">
          <div class="temp-section">
            <span class="temp">{{ currentTemp }}°</span>
            <el-image :src="weatherIcon" class="weather-icon" fit="contain" />
          </div>
          <div class="weather-status">
            <el-tag :type="getWeatherTagType(weatherStatus)" effect="dark">
              {{ weatherStatus }}
            </el-tag>
          </div>
        </div>

        <!-- 天气详情 -->
        <div class="weather-details">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="风力">
              {{ windPower }}
            </el-descriptions-item>
            <el-descriptions-item label="风向">
              {{ windDirection }}
            </el-descriptions-item>
            <el-descriptions-item label="风速">
              {{ windSpeed }} km/h
            </el-descriptions-item>
            <el-descriptions-item label="降水">
              {{ precipitation }} mm
            </el-descriptions-item>
            <el-descriptions-item label="气压">
              {{ pressure }} hPa
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <!-- <div class="poem-container" v-if="!moonStatus && !open_start">
      <h1 class="title" v-if="!poemLines.title">
        好诗，好事，好心情!
        <br />
        总有那么一首诗适合你
      </h1>
      <h1 class="title">{{ poemLines.title }}</h1>
      <p class="author">{{ poemLines.author }}</p>
      <p class="verse" v-for="(line, index) in poemLines.lines" :key="index">
        {{ line }}
      </p>
    </div> -->
    <el-image
      v-if="moonStatus && !open_start"
      :src="moon"
      fit="scale-down"
      style="width: 600px; height: 300px; margin-top: 100px"
    ></el-image>
    <div class="home_video_image" v-if="open_start">
      <!-- 视频播放区域 -->
      <div class="video-container">
        <video
          ref="videoRef"
          :src="start_text[3]"
          autoplay
          loop
          muted
          playsinline
          preload="auto"
          webkit-playsinline
          x5-playsinline
          @loadeddata="handleVideoLoaded"
          @canplay="handleCanPlay"
          @ended="handleVideoEnded"
          @error="handleVideoError"
          @loadstart="handleLoadStart"
          class="welcome-video"
        >
          <source :src="videoSrc" type="video/mp4" />
          您的浏览器不支持视频播放
        </video>

        <div v-if="videoLoading" class="video-loading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>视频加载中...</span>
        </div>

        <div v-if="videoError" class="video-error" @click="reloadVideo">
          <el-icon><VideoCamera /></el-icon>
          <span>视频加载失败，点击重试</span>
        </div>
      </div>
      <!-- 星座描述 -->
      <div class="zodiac-text left-text">
        <el-button type="primary" size="default" @click="nextMonth">
          下一月
        </el-button>
        <h3 style="text-align: center; margin-bottom: 10px; font-weight: bold">
          {{ start_name }}
        </h3>

        <p>
          <span style="font-weight: bold">性格​​：</span>
          {{ start_text[0] }}
        </p>
        <p>
          <span style="font-weight: bold">情感​​：</span>
          {{ start_text[1] }}
        </p>
        <p>
          <span style="font-weight: bold">事业​​：</span>
          {{ start_text[2] }}
        </p>
        <!-- 其他星座描述按需添加 -->
      </div>
      <div class="video-container">
        <video
          ref="videoRef"
          :src="Angel"
          autoplay
          loop
          muted
          playsinline
          preload="auto"
          webkit-playsinline
          x5-playsinline
          @loadeddata="handleVideoLoaded"
          @canplay="handleCanPlay"
          @ended="handleVideoEnded"
          @error="handleVideoError"
          @loadstart="handleLoadStart"
          class="welcome-video"
        >
          <source :src="videoSrc" type="video/mp4" />
          您的浏览器不支持视频播放
        </video>

        <div v-if="videoLoading" class="video-loading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>视频加载中...</span>
        </div>

        <div v-if="videoError" class="video-error" @click="reloadVideo">
          <el-icon><VideoCamera /></el-icon>
          <span>视频加载失败，点击重试</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  onMounted,
  onUnmounted,
  ref,
  nextTick,
  onActivated,
  computed,
} from 'vue'
import { getTime } from '@/utils/time'
import useUserStore from '@/store/modules/user'
import { getStyle } from '@/utils/sass-variables'
import emitter from '@/utils/emitter'
import { Loading, VideoCamera } from '@element-plus/icons-vue'
import request from '@/utils/request'
import moon from '@/assets/images/moon.png'
import leo_video from '@/assets/images/video/leo.mp4'
import Aquarius from '@/assets/images/video/Aquarius.mp4'
import Aries from '@/assets/images/video/Aries.mp4'
import Gemini from '@/assets/images/video/Gemini.mp4'
import Taurus from '@/assets/images/video/Taurus.mp4'
import Pisces from '@/assets/images/video/Pisces.mp4'
import Capricorn from '@/assets/images/video/Capricorn.mp4'
import Sagittarius from '@/assets/images/video/Sagittarius.mp4'
import Cancer from '@/assets/images/video/Cancer.mp4'
import Scorpio from '@/assets/images/video/Scorpio.mp4'
import virgo from '@/assets/images/video/virgo.mp4'
import Libra from '@/assets/images/video/Libra.mp4'
import Angel from '@/assets/images/video/Angel.mp4'
// 图标引入
import { Location } from '@element-plus/icons-vue'
const currentHost = window.location.hostname
let images_status = currentHost == 'localhost'
defineOptions({
  name: 'home',
})
//天气
// 天气状态标签类型
const getWeatherTagType = (status: any) => {
  const map: any = { 晴: 'success', 多云: '', 雨: 'warning', 雷阵雨: 'danger' }
  return map[status] || 'info'
}
// 静态数据（您可修改以下值）
let city = ref('上海虹口区')
let updateTime = ref('2025-08-20 14:30')
let currentTemp = ref(28)
let weatherStatus = ref('晴')
let weatherIcon = ref('https://rescdn.apihz.cn/resimg/tianqi/duoyun.png') // 替换为实际图标URL
let windPower = ref('3级')
let windDirection = ref('东南风')
let windSpeed = ref(15)
let precipitation = ref(2.1)
let pressure = ref(1012)
// 视频相关
const videoRef = ref<HTMLVideoElement>()
const videoLoading = ref(true)
const videoError = ref(false)
const isVideoReady = ref(false)
//文字描述
//测试星座
let lizhi = ref('')
let Poet = ref('')

const poemLines = computed(() => {
  // 按空格拆分可能不准确（诗名/作者含空格时会出错）
  const [title, author, ...lines] = Poet.value.split(' ')
  return { title, author, lines }
})
let yue = ref(1)
let ri = ref(0)
let open_start = ref(false)
function test() {
  // const zodiac = getZodiacSign(yue.value - 1, ri.value)
  // start_name.value = zodiac
  // start_text.value = getZodiacText(yue.value - 1, ri.value)
  // 使用 axios 发起 POST 请求
}
function starts_open() {
  open_start.value = !open_start.value
}
let start_text = ref<string[]>([])
let starts_texts = ref([
  [
    '务实坚韧，目标导向，野心勃勃但压抑情感。重视传统与长期规划',
    '慢热且实际，通过责任（如经济保障）表达爱，但需学会浪漫表达',
    '适合管理、工程等需耐力的职业，执行力与毅力突出',
    Capricorn,
  ],
  [
    '独立创新，理性博爱，讨厌世俗规则。友善但情感疏离，注重精神共鸣',
    '需要自由与理解，厌恶控制。表达方式独特（如共同兴趣），但易忽冷忽热',
    '适合科技、公益等需创意的领域，前瞻性强',
    Aquarius,
  ],
  [
    '敏感梦幻，共情力强，艺术气质浓厚但易逃避现实。直觉敏锐，易受环境影响',
    '浪漫牺牲型，渴望灵魂伴侣，但需避免过度依赖或优柔寡断',
    '适合艺术、心理咨询等需想象力的职业，情感洞察力佳',
    Pisces,
  ],
  [
    '热情冲动、勇敢果断，具有领导力和竞争意识，但易因急躁忽略细节。脾气来得快去得快，不记仇但易得罪人',
    '主动直接，追求浪漫与激情，但需注意控制情绪化倾向。对伴侣忠诚，厌恶暧昧',
    '适合创业、体育等需竞争与激情的领域，擅长开拓新项目',
    Aries,
  ],
  [
    '务实稳重，注重物质安全感，耐心坚韧但固执保守。情感内敛，擅长隐忍',
    '慢热且理性，追求稳定关系，通过实际行动（如烹饪、礼物）表达爱意，但易因物质考量忽视情感需求',
    '适合金融、房地产等需持久力的行业，重视职业稳定性',
    Taurus,
  ],
  [
    '聪明善变，好奇心强，适应力佳但专注力不足。双重人格，社交中活泼但内心敏感',
    '喜欢新鲜感，需伴侣理解其自由需求。表达方式灵活，但易被误解为花心',
    '适合媒体、策划等需创意与沟通的工作，思维敏捷但需避免三分钟热度',
    Gemini,
  ],
  [
    '温柔敏感，家庭导向，共情力强但情绪化。外壳坚硬内心脆弱，依赖安全感',
    '细腻体贴，愿为家庭付出一切，但需避免过度控制伴侣。慢热但长情',
    '适合教育、护理等需关怀的职业，擅长营造温暖环境',
    Cancer,
  ],
  [
    '自信慷慨，领导力强，渴望关注但易自负。外表强势，私下需要情感认可',
    '浪漫专一，喜欢被崇拜，但需注意尊重伴侣独立性。占有欲与表现欲并存',
    '适合演艺、管理等需展示魅力的领域，天生领导者',
    leo_video,
  ],
  [
    '完美主义，逻辑严谨，注重细节但易挑剔焦虑。服务精神强，习惯自我批判',
    '内敛务实，通过行动（如解决问题）表达爱，但需避免过度说教伴侣',
    '适合分析、医疗等需精确度的职业，执行力强',
    virgo,
    '农业女神德墨忒尔之女珀耳塞福涅被冥王劫持，导致四季轮回。处女座持麦穗象征丰收与纯洁',
  ],
  [
    '追求和谐，社交能力强，审美在线但优柔寡断。厌恶冲突，易妥协',
    '注重平等与美感，擅长调和矛盾，但易因犹豫错失良机',
    '适合法律、设计等需协调与美感的领域，团队合作佳',
    Libra, // Libra,
  ],
  [
    '深沉神秘，洞察力强，爱恨极端。防备心重但忠诚，掌控欲与激情并存',
    '专一且占有欲强，追求灵魂契合，但需避免猜忌与冷暴力',
    '适合侦查、心理学等需深度的职业，意志坚定',
    Scorpio,
    '',
  ],
  [
    '乐观自由，冒险精神强，讨厌束缚但责任感弱。思想开放，幽默外向',
    '需要个人空间，厌恶黏腻关系。表达直接，但易因粗心伤害伴侣',
    '适合旅行、教育等需探索的领域，创新能力佳',
    Sagittarius,
  ],
])
let start_name = ref('')
console.log(getZodiacSign(11, 22))
let addMonth = ref(1)
const nextMonth = () => {
  const today = new Date()
  let months = (today.getMonth() + addMonth.value) % 12
  console.log(months)
  const zodiac = getZodiacSign(months, today.getDate())
  start_name.value = zodiac
  start_text.value = getZodiacText(months, today.getDate())
  addMonth.value++
}
function getZodiacText(month: any, day: any) {
  const dates = [19, 18, 20, 19, 20, 21, 22, 22, 22, 23, 22, 21] // 每月分界日
  const index = month + (day <= dates[month] ? 0 : 1)
  return starts_texts.value[index < 12 ? index : 0] // 处理跨年（1月）
}
function getZodiacSign(month: any, day: any) {
  const dates = [19, 18, 20, 19, 20, 21, 22, 22, 22, 23, 22, 21] // 每月分界日
  const signs = [
    '摩羯座（12.22-1.19）​',
    '水瓶座（1.20-2.18）​',
    '双鱼座（2.19-3.20）​',
    '白羊座（3.21-4.19）​',
    '金牛座（4.20-5.20）',
    '双子座（5.21-6.20）​',
    '巨蟹座（6.21-7.22）​',
    '狮子座（7.23-8.22）​',
    '处女座（8.23-9.22）',
    '天秤座（9.23-10.22）​',
    '天蝎座（10.23-11.21）',
    '射手座（11.22-12.21）​',
  ]
  const index = month + (day <= dates[month] ? 0 : 1)
  return signs[index < 12 ? index : 0] // 处理跨年（1月）
}
// 视频URL链接
const videoSrc = ref(leo_video)

// 获取存储用户信息的仓库对象
let userStore = useUserStore()

// 视频开始加载
const handleLoadStart = () => {
  // console.log('开始加载视频')
  videoLoading.value = true
  videoError.value = false
}

// 视频加载完成事件
const handleVideoLoaded = () => {
  // console.log('视频数据加载完成')
  videoLoading.value = false
  videoError.value = false
  isVideoReady.value = true
}

// 视频可以播放时
const handleCanPlay = async () => {
  // console.log('视频可以播放')
  videoLoading.value = false

  if (videoRef.value && isVideoReady.value) {
    try {
      // 确保视频设置正确
      videoRef.value.muted = true
      videoRef.value.loop = true

      // 使用 nextTick 确保 DOM 更新完成
      await nextTick()

      // 播放视频
      await videoRef.value.play()
      // console.log('视频开始播放')
    } catch (error) {
      console.error('视频播放失败:', error)
      // 如果自动播放失败，用户可以手动点击播放
    }
  }
}

// 视频结束事件（备用方案）
const handleVideoEnded = () => {
  console.log('视频播放结束，准备重新开始')
  if (videoRef.value) {
    videoRef.value.currentTime = 0
    videoRef.value.play().catch(console.error)
  }
}

// 视频加载错误
const handleVideoError = (event: Event) => {
  console.error('视频加载错误:', event)
  videoLoading.value = false
  videoError.value = true
  isVideoReady.value = false
}

// 手动重新加载视频
const reloadVideo = async () => {
  if (videoRef.value) {
    videoError.value = false
    videoLoading.value = true
    isVideoReady.value = false

    try {
      videoRef.value.load()
      await nextTick()

      // 重新设置视频属性
      videoRef.value.muted = true
      videoRef.value.loop = true
    } catch (error) {
      console.error('重新加载视频失败:', error)
      videoError.value = true
    }
  }
}

// 获取全局内容背景样式
const globalMainColor = ref('')
const bodyStyle = ref('')
let count_on_mounted = 1
//缓存触发
onActivated(async () => {
  console.log(count_on_mounted)
  if (count_on_mounted != 2) {
    await reloadVideo()
  }
  count_on_mounted++
})
//接口盒子获取天气
const get_weather = async () => {
  // 使用 axios 发起 GET 请求(推荐)
  request
    .get('https://cn.apihz.cn/api/tianqi/tqyb.php', {
      params: {
        id: 10007364,
        key: 'bf29493f15bc09e5a6d97e357a01f5a4',
        sheng: '上海',
        place: '上海',
      }, // 查询参数
    })
    .then((response: any) => {
      console.log(response)
      if (response.code == 200) {
        city.value = response.place
        updateTime.value = response.uptime
        currentTemp.value = response.temperature
        weatherStatus.value = response.weather1
        weatherIcon.value = response.weather1img
        windPower.value = response.windScale
        windDirection.value = response.windDirection
        windSpeed.value = response.windSpeed
        precipitation.value = response.precipitation
        pressure.value = response.pressure
      }
    })
    .catch((error: any) => {
      console.error(error)
    })
}
//腾讯获取天气
const get_tenxun_weather = async () => {
  // 使用 axios 发起 GET 请求(推荐)
  request
    .get('chat/weather', {
      params: {
        source: 'pc',
        weather_type: 'observe',
        province: '上海',
        city: '上海',
        county: '虹口',
      }, // 查询参数
    })
    .then((response: any) => {
      console.log(response)
      if (response.code == 200) {
        city.value = '中国 上海 虹口'
        const dateStr = response.data.observe.update_time
        // 提取各部分
        const year = dateStr.substring(0, 4)
        const month = dateStr.substring(4, 6)
        const day = dateStr.substring(6, 8)
        const hour = dateStr.substring(8, 10)
        const minute = dateStr.substring(10, 12)
        updateTime.value = `${year}-${month}-${day} ${hour}:${minute}`
        currentTemp.value = response.data.observe.degree
        weatherStatus.value = response.data.observe.weather
        weatherIcon.value = response.data.icon_data
        windPower.value = response.data.observe.wind_power
        windDirection.value = response.data.observe.wind_direction_name
        windSpeed.value = response.data.observe.wind_direction
        precipitation.value = response.data.observe.precipitation
        pressure.value = response.data.observe.pressure
      }
    })
    .catch((error: any) => {
      console.error(error)
    })
}
const chat_msg = async (msg: any) => {
  let result = await request.post('chat/happy', {
    content: msg,
  })

  if (result) {
    return result.data.content
  }
}
onMounted(async () => {
  count_on_mounted++
  globalMainColor.value = getStyle('--base-main-background')
  bodyStyle.value = `background-image: ${globalMainColor.value}`

  // 等待 DOM 更新完成
  // await nextTick()

  // 确保视频元素存在并设置属性
  if (videoRef.value) {
    // 设置视频属性
    videoRef.value.muted = true
    videoRef.value.loop = true
    videoRef.value.autoplay = true
    videoRef.value.playsInline = true

    // iOS Safari 兼容
    videoRef.value.setAttribute('webkit-playsinline', 'true')
    videoRef.value.setAttribute('x5-playsinline', 'true')

    console.log('视频元素初始化完成')
  }
  // get_weather()
  get_tenxun_weather()
  lizhi.value = await chat_msg('给我一句励志名言或者句子，不要回答其他内容')
  // Poet.value = await chat_msg(
  //   '给我一首诗，诗名后面不要带标点符号，后面跟署名作者，然后是诗句，要完整的诗，不要回答其他内容',
  // )
  console.log(Poet.value)
  let anhei = localStorage.getItem('anhei')
  if (anhei == 'true') {
    moonStatus.value = true
  } else {
    moonStatus.value = false
  }
  const today = new Date()
  console.log(today.getMonth()) //8月，值是7
  console.log(today.getDate())
  const zodiac = getZodiacSign(today.getMonth(), today.getDate())
  start_name.value = zodiac
  start_text.value = getZodiacText(today.getMonth(), today.getDate())
})

// 暗黑模式事件
emitter.on('card-anhei', (value: any) => {
  if (value) {
    bodyStyle.value = ''
  } else {
    bodyStyle.value = `background-image: ${globalMainColor.value}`
  }
})
let moonStatus = ref(false)
emitter.on('homeImage', (value: any) => {
  open_start.value = false
  if (value) {
    moonStatus.value = true
  } else {
    moonStatus.value = false
  }
})

onUnmounted(() => {
  // 清理事件监听
  emitter.off('card-anhei')

  // 停止视频播放
  if (videoRef.value) {
    videoRef.value.pause()
    videoRef.value.removeAttribute('src')
    videoRef.value.load()
  }
})
</script>

<style scoped lang="scss">
//天气
.weather-card {
  width: 600px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #0e50d4 100%);
  border: none;
  margin-left: 10px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(90deg, #409eff 0%, #64b5f6 100%);
    color: white;
    border-radius: 30px;

    .location {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 18px;
    }

    .update-time {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      font-size: 18px;
      .el-icon {
        margin-right: 4px;
      }
    }
  }

  .weather-content {
    display: flex;
    padding: 20px;
    gap: 24px;

    .weather-main {
      text-align: center;
      min-width: 120px;
      .temp {
        font-size: 100px;
        font-weight: 800;
        background: linear-gradient(45deg, #303133 30%, #606266 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .weather-icon {
        width: 70px;
        // height: 90px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        transition: transform 0.5s ease;
        &:hover {
          transform: rotate(15deg) scale(1.1);
        }
      }
      .weather-status {
        width: 100px;
        margin-top: 12px;
        .el-tag {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
//星座按钮
.constellation-btn {
  background: linear-gradient(90deg, #6a11cb 0%, #2575fc 50%, #6a11cb 100%);
  background-size: 200% auto;
  color: rgb(246, 246, 3);
  padding: 14px 32px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
  transition: all 0.5s ease;
  position: absolute;
  top: 0; /* 距离顶部0像素 */
  right: 5%; /* 距离左侧0像素 */
  overflow: hidden;
  font-weight: bold;
  margin-top: 10px;
  z-index: 1000; /* 确保按钮在其他元素之上 */
  margin: 20px; /* 添加一些外边距避免紧贴边缘 */
}

.constellation-btn:hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(106, 17, 203, 0.4);
}

.constellation-btn:active {
  transform: translateY(1px);
}
.constellation-btn:hover::after {
  top: -50%;
  left: -50%;
}
.constellation-btn::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 70%
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px 10px,
      rgba(255, 255, 255, 0.1) 10px 20px
    );
  opacity: 0.4;
  transition: all 0.8s ease;
}
//古诗
.poem-container {
  font-family: 'SimSun', '宋体', serif; /* 古典字体 */
  text-align: center; /* 居中排版 */
  // max-width: 600px;
  // min-width: 600px;
  width: 600px;
  min-height: 500px;
  margin: auto;
  padding: 30px;
  background: #f9f5e9; /* 米黄背景 */
  border: 1px solid #d4c9a6; /* 浅褐色边框 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.title {
  font-size: 2em;
  color: #8b4513; /* 深棕色标题 */
  margin-bottom: 10px;
  letter-spacing: 0.1em; /* 标题字距 */
}
.author {
  font-size: 1.4em;
  color: #a0522d; /* 作者名深红色 */
  margin-bottom: 30px;
}
.verse {
  font-size: 1.2em;
  line-height: 1.8; /* 舒适行距 */
  color: #333;
  margin: 15px 0;
}
.gradient-text {
  font-family: 'SimSun', '宋体', serif;
  font-size: 2.5em;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    #ff4d4d,
    #f9cb28,
    #4dff4d,
    #4da6ff,
    #ff4dff
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-flow 8s linear infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.home_video_image {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px; /* 控制文字与视频间距 */
  padding: 20px;
}
.zodiac-text {
  flex: 1; /* 文字区域自动填充剩余空间 */
  padding: 15px;
  background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  // max-width: 25%; /* 控制文字区域最大宽度 */
}

.left-text {
  text-align: left;
}
.right-text {
  text-align: left;
}
.video-container {
  position: relative;
  // width: 100%;
  height: 100%;
  // flex: 0 0 50%; /* 视频占据50%宽度 */
  // display: flex;
  // justify-content: center;
  // align-items: center;
  background: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
}
.box-home {
  display: flex;
  .avatar {
    border-radius: 50%;
  }

  .bottom {
    margin-left: 20px;

    .title {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 20px;
    }

    .subtitle {
      font-style: italic;
      color: rgb(77, 113, 126);
    }
  }
}

.bottoms {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  // flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 50px;
}

.welcome-video {
  width: 100%;
  height: 550px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #000;

  /* 优化视频播放性能 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* 硬件加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #606266;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
}

.video-loading .el-icon {
  font-size: 32px;
}

.video-loading span {
  font-size: 14px;
}

.video-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #f56c6c;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
}

.video-error:hover {
  color: #f78989;
  background: rgba(255, 255, 255, 1);
}

.video-error .el-icon {
  font-size: 32px;
}

.video-error span {
  font-size: 14px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-video {
    height: 300px;
  }

  .video-container {
    width: 95%;
  }

  .box-home {
    flex-direction: column;
    text-align: center;

    .bottom {
      margin-left: 0;
      margin-top: 20px;
    }
  }
}
</style>
